<template>
	<view class="page">
		<view class="searchRow" style="height: 50rpx;border: 0;">
			<view class="leftBox">
				<view class="row">
					<view class="label">
						交易渠道:
					</view>
					<view class="val" @click="selectListShow=true">
						{{selectLabel ? selectLabel : '请选择' }}
					</view>
				</view>
			</view>
		</view>
		<view class="searchRow">
			<view class="leftBox">
				<view class="row">
					<view class="label">
						开始时间:
					</view>
					<view class="val" @click="beginTimeShow=true">
						{{params.beginTime ? params.beginTime : '请选择' }}
					</view>
				</view>
				<view class="row">
					<view class="label">
						结束时间:
					</view>
					<view class="val" @click="endTimeShow=true">
						{{params.endTime ? params.endTime : '请选择' }}
					</view>
				</view>
			</view>
			<view class="btn" @click="goSearch">
				查询
			</view>
		</view>
	
		<scroll-view scroll-y="true" style="height: calc( 100vh - 140rpx );" @scrolltolower="scrolltolower">
			<view class="list">
				<scollerXTabel itemWidth="160rpx"  :fixedField="fixedField" :tableArr="list"  :arrField="arrField"
					></scollerXTabel>
			</view>
		</scroll-view>
		<u-datetime-picker
		    :show="beginTimeShow" ref="datetimePicker" v-model="beginTime" 
		    mode="date"  @cancel="beginTimeShow=false" @confirm="beginTimeConfirm"
		       ></u-datetime-picker>
		<u-datetime-picker
			:show="endTimeShow" ref="datetimePicker" v-model="endTime" 
			mode="date"  @cancel="endTimeShow=false" @confirm="endTimeConfirm"
	       ></u-datetime-picker>
		<u-picker :show="selectListShow" :columns="selectList" keyName="label"
			@cancel="selectListShow = false"	@confirm="selectConfirm"></u-picker>
	</view>
</template>

<script>
	import {cardOperationlistApi} from '@/common/api/commonApi/commonApi.js'
	import scollerXTabel from '@/components/scollerXTabel.vue'
	export default {
		data() {
			return {
				list:[],
				params:{
					mainframeNo : '',
					currPage : 1,
					pageSize : 15,
					beginTime : '',
					endTime : '',
					transChannl : '',
					memberNo : uni.getStorageSync('selectInfoAccount').memberNo
				},
				beginTime: Number(new Date()),
				endTime: Number(new Date()),
				fixedField:[
					// {
					// 	val: 'memberName',
					// 	lable: '名称',
					// },
					// {
					// 	val: 'memberNo',
					// 	lable: '会员编号',
					// },
					// {
					// 	val: 'cardNo',
					// 	lable: '卡号',
					// },
				],
				arrField:[
					{
						val: 'transAmt',
						lable: '交易金额',
					},
					{
						val: 'accountPayAmount',
						lable: '现金交易',
					},
					{
						val: 'subsidyPayAmount',
						lable: '补贴交易',
					},
					{
						val: 'transChannl',
						lable: '交易渠道',
					},
					{
						val: 'payChannl',
						lable: '支付渠道',
					},
					{
						val: 'operationType',
						lable: '操作类型',
					},
					{
						val: 'createDate',
						lable: '创建时间',
					}
				],
				beginTimeShow : false,
				endTimeShow : false,
				total : 0,
				selectList : [
					[
						{
							label : 'PC机',
							val: 1
						},
						{
							label : '移动端',
							val: 2
						},
						{
							label : '充值机',
							val: 3
						},
						{
							label : 'P0S',
							val: 4
						},
						
					]
				],
				selectListShow : false,
				selectLabel : ''
			}
		},
		components:{
			scollerXTabel,
		},
		methods: {
			selectConfirm(e){
				this.selectLabel = e.value[0].label
				this.params.transChannl = e.value[0].val
				this.selectListShow = false
			},
			scrolltolower(){
				if(this.total == this.list.length){
					return this.setMessage('没有更多了')
				}
				this.params.currPage ++
				this.getList()
			},
			goSearch(){
				this.params.currPage = 1 
				this.getList()
			},
			beginTimeConfirm(e){
				let date = this.dateformat(e.value).split(' ')[0]
				this.params.beginTime = date
				console.log(this.params.beginTime);
				this.beginTimeShow = false
			},
			endTimeConfirm(e){
				let date = this.dateformat(e.value).split(' ')[0]
				this.params.endTime = date
				this.endTimeShow = false
			},
			getList(){
				let params = this.params
				if(!params.endTime) delete params.endTime
				if(!params.beginTime) delete params.beginTime
				if(!params.transChannl) delete params.transChannl
				cardOperationlistApi(params).then(res=>{
					if(params.currPage==1) this.list = []
					this.list = this.list.concat(res.page.list)
					this.total = res.page.totalCount
				})
			},
			goSearch(){
				this.params.currPage = 1
				this.getList()
			}
			
		},
		onLoad() {
			let info = uni.getStorageSync('selectInfoAccount')
			this.params.mainframeNo = info.mainframeNo
			this.getList()
		},
		onShow() {
			
		},
	}
</script>

<style lang="scss" scoped>
.page{
	background-color: #fff;
	height: 100vh;
	.searchRow{
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		border-bottom: 2rpx solid #dedede;
		.leftBox{
			flex: 1;
			.row{
				display: flex;
				align-items: center;
				height: 70rpx;
				.label{
					margin-right: 30rpx;
				}
				.val{
					
				}
			}
		}
		.btn{
			width: 140rpx;
			height: 56rpx;
			border-radius: 10rpx;
			color: #fff;
			@include flexCenter;
			background-color: #4089f0;
		}
		
	}
}
</style>
